<template>
    <div class="simple-file-test">
        <h1>文件管理测试页面</h1>
        <p>如果你能看到这个页面，说明路由配置正确。</p>
        <el-button @click="testApi">测试API连接</el-button>
        <div v-if="apiResult">
            <h3>API测试结果：</h3>
            <pre>{{ apiResult }}</pre>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const apiResult = ref('')

const testApi = async () => {
    try {
        const response = await axios.get('http://localhost:5177/api/file', {
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            }
        })
        apiResult.value = JSON.stringify(response.data, null, 2)
        ElMessage.success('API连接成功')
    } catch (error) {
        apiResult.value = `API连接失败: ${error.message}`
        ElMessage.error('API连接失败')
    }
}
</script>

<style scoped>
.simple-file-test {
    padding: 20px;
}

pre {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
}
</style>
